<template>
	<van-popup v-model:show="showCondition" teleport="#app" position="bottom" class="drawer-bottom" round closeable>
		<div class="popup-title">更多筛选</div>
		<div class="main-wrap">
			<div class="cell-group">
				<div class="cell-wrap">
					<ul class="item-list">
						<li :class="myCondition.isHot===1? 'active':''" @click="myCondition.isHot= myCondition.isHot===0? 1:0">热门店铺</li>
						<li style="width:auto;"
							:class="myCondition.isCloubSupplier===1? 'active':''" @click="myCondition.isCloubSupplier = myCondition.isCloubSupplier===0? 1:0">
							一件代发供货商
						</li>
					</ul>
				</div>
			</div>
			<div class="cell-group">
				<div class="cell-title">
					<label>店铺类型</label>
				</div>
				<div class="cell-wrap">
					<ul class="item-list" :style="'height:auto'">
						<template v-for="(item,index) in shopTypeList" key="index">
							<li :class="myCondition.shopType===item.id? 'active':''" @click="setShopType(item.id)">{{item.label}}</li>
						</template>
					</ul>
				</div>
			</div>
			<div class="cell-group">
				<div class="cell-title">
					<van-badge position="top-left" :dot="myCondition.catIds.length>0"><label>主营范围</label></van-badge>
				</div>
				<div class="cell-wrap">
					<ul class="item-list" :style="'height:auto'">
						<template v-for="(item,index) in category" key="index">
							<li v-if="includeItem(myCondition.catIds,item.id)" class="active" @click="removeItemFromList(myCondition.catIds,item.id)">{{item.label}}</li>
							<li v-else @click="addItem2List(myCondition.catIds,item.id)">{{item.label}}</li>
						</template>
					</ul>
				</div>
			</div>
		</div>
		<div class="drawer-btn">
			<van-button type="warning" block class="button-first" @click="resetCondition(undefined)">重置</van-button>
			<van-button type="primary" block class="button-last" @click="handleSearch">完成</van-button>
		</div>
	</van-popup>
</template>
<style lang="scss" scoped>
.popup-title{height:48px;display:flex;align-items:center; justify-content: center}
.main-wrap{
	height:calc(84vh - 98px);
	:deep(.van-cell__title){flex:0.25;font-size:15px}
	.cell-group{
		position:relative;
		margin-bottom:10px;
		&::after{
			position: absolute;
			box-sizing: border-box;
			content: " ";
			pointer-events: none;
			right: var(--van-padding-md);
			bottom: 0;
			left: var(--van-padding-md);
			border-bottom: 1px solid var(--van-cell-border-color);
			transform: scaleY(.5);
		}
		.cell-title{
			color:var(--font-first-color);padding:10px 16px;font-size: 15px;
			display:flex;align-items: center;justify-content:space-between;
			//.right-info{color:var(--font-third-color);font-size:12px;}
		}
		.cell-wrap{
			padding:0 16px 10px 16px;
		}
		:deep(.van-stepper__input){
			border-radius:16px; width:42vw; height:32px;
			&::placeholder{color:var(--font-disable-color);}
		}
		.item-list{
			margin:0 -10px -10px 0;display:flex;padding:0; flex-wrap:wrap; overflow:hidden;
			&>li{
				display:block; text-align:center; line-height:30px; width:calc((100vw - 52px)/3);
				//max-width:calc(50vw - 20px);
				overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position:relative; color:var(--font-second-color);
				margin:0 10px 10px 0;padding:0 10px;height:32px;border-radius:20px; font-size:13px;
				border:1px solid var(--bar-input-color);

				&::before{
					width:100%;height:100%; top:0;left:0;position:absolute;content:" ";
					background-color:var(--bar-input-color);z-index:-1;
				}
				&.active{
					border-color:var(--van-primary-color);color:var(--van-primary-color);
					&::before{
						background-color:var(--van-primary-color); opacity: .1;
					}
				}
				&.more-items{
					border-color:var(--border-color);
				}
			}
		}
	}
}
</style>
<script lang="ts" setup generic="T">
import { SearchShopsCondition } from '@/types'
import {lengthCutting} from "@/utils/validate";
import useKV from "@/hooks/useKV";
//搜索商品查询条件

//props
const props=defineProps({
	locateAble:{
		type:Boolean,
		required:false,
	}
})

//emits
const emits = defineEmits(['handleSearch'])

//data
const showCondition=ref(false)
const myCondition = reactive(<SearchShopsCondition>{
	shopType:'',            //店铺类型
	locate: '9A-', //string渠道收货地址省分，必填，用来约束店铺的业务省分范围（全国、某个指定省）
	catIds:[], // string[] //主营范围：选择内容为商品类型树一级节点，可默认为空数组
	isHot:0,    //0/1 是否热门店铺
	isCloubSupplier:0, // 0/1 是否优品小店供货商
})

//商品类型（主营范围）相关data
//todo: 定义商品类型树第一层，还需要完成从店铺/全平台的solr中异步读取
const category = ref(<Array<any>>[])
category.value = [
	{ id:'01',label:'手机终端', },
	{ id:'02',label:'智慧生活', },
	{ id:'03',label:'智慧固网', },
	{ id:'04',label:'个人智能', },
	{ id:'05',label:'行业模组', },
	{ id:'06',label:'3C配件', },
	{ id:'07',label:'电商百货', },
	{ id:'08',label: '权益', },
	{ id:'10',label: '其它', },
]

//店铺类型：
const {shopTypeMap} = useKV()
const shopTypeList = [{id:'',label:'所有类型'}]
for(let key in shopTypeMap){
	shopTypeList.push({id:key,label:shopTypeMap[key as keyof typeof shopTypeMap]})
}

//methods
const includeItem=(list:Array<any>,val:string)=>{
	return list.includes( val)
}
const removeItemFromList= (list: Array<any>, val: string)=>{
	for(let i=0;i<list.length;++i){
		if(list[i] === val){
			list.splice(i,1)
			break
		}
	}
}
const addItem2List=(list:Array<any>,val:string)=>{
	for(let i=0;i<list.length;++i){
		if(list[i] === val){
			return
		}
	}
	list.push(val)
}
const setShopType = (val:string)=>{
	myCondition.shopType = val
}

const handleSearch=()=>{
	emits('handleSearch',myCondition)
	console.log('myCondition',myCondition);
	showCondition.value=false
}
const resetCondition=(newObj?:SearchShopsCondition)=>{
	if(newObj){
		console.log(newObj)
		myCondition.shopType = newObj.shopType
		myCondition.locate = newObj.locate
		myCondition.catIds.splice(0,myCondition.catIds.length)
		myCondition.catIds.push(...newObj.catIds)
		myCondition.isHot = newObj.isHot
		myCondition.isCloubSupplier = newObj.isCloubSupplier

	}else{
		myCondition.shopType = ''            //店铺类型
		myCondition.locate = '9A-' // todo: string渠道收货地址省分，必填，用来约束店铺的业务省分范围（全国、某个指定省） //取当前工号的默认收货地址或业务归属省
		myCondition.catIds = [] // string[] //主营范围：选择内容为商品类型树一级节点，可默认为空数组
		myCondition.isHot = 0    //0/1 是否热门店铺
		myCondition.isCloubSupplier = 0 // 0/1 是否优品小店供货商
	}

}
const displaySheet=(cond:SearchShopsCondition)=>{
	showCondition.value=true
	//todo:判断品类、店铺列表、品牌列表是否需要异步载入各选项，以及载入各选项，待载入完全后，再进行渲染
	resetCondition(cond)
}


defineExpose({
	displaySheet,handleSearch,resetCondition,
})
</script>